<template>
  <div class="collect-page">
    <!-- 收藏页面 -->
     <!-- 1.顶部标题 -->
     <van-nav-bar title="面经收藏" fixed />
     <van-list class="list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleItem
      @click.native="$router.push(`/detail/${item.id}`)"
        v-for="item in list"
        :key="item.id"
        :item="item"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { getArticleCollectList } from '@/api/article'
export default {
  name: 'CollectPage',
  data () {
    return {
      page: 1, // 1.当前第一页
      pageSize: 10, // 2.每页显示10条数据
      list: [], // 4.收藏文章列表
      loading: false, // 5.加载更多动画
      finished: false // 6.是否全部加载完毕
    }
  },
  methods: {
    async  onLoad () {
      // 1.发请求，获取文章列表
      const res = await getArticleCollectList({
        page: this.page,
        pageSize: this.pageSize

      })
      console.log(res)
      // 2.在原数组后面追加数据
      this.list.push(...res.data.rows)
      // 3.current++ 更新当前页码数
      this.page++
      // 4.将加载更多动画 设为false ，说明我还需要继续发请求 获取数据
      this.loading = false
      // 5.什么时候完成呢？（必须要有暂停，否则会一直发请求）
      // 就是最后一次获取到的数组为空数组
      if (res.data.rows.length === 0) {
        // 状态设为已完成
        this.finished = true
      }
    }

  }
}
</script>

<style lang="less" scoped>
.list{
  margin-top:50px;
}
</style>
